<template>
    <div class="app-container">
      <div class="filter-container">
        <el-input v-model="listQuery.userName" placeholder="用户名" style="width: 200px;"
         class="filter-item" @keyup.enter.native="handleFilter" />
         <el-input v-model="listQuery.productName" placeholder="商品名" style="width: 200px;"
         class="filter-item" @keyup.enter.native="handleFilter" />

    <!-- 使用 el-select 提供下拉菜单选择 -->
    <el-select v-model="listQuery.evaluateLevel" placeholder="评价等级" style="width: 200px;" class="filter-item" @change="handleFilter">
      <el-option
        v-for="item in evaluateLevelOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
        
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
        
      </div>
  
      <!--表格内容-->
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
      >
        <el-table-column label="ID" prop="evaluateId" sortable="custom" align="center" width="80" :class-name="getSortClass('evaluateId')">
          <template slot-scope="{row}">
            <span>{{ row.evaluateId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="userName"  align="center" width="150">
          <template slot-scope="{row}">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名" prop="productName"  align="center" width="150">
          <template slot-scope="{row}">
            <span>{{ row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价等级" prop="evaluateLevel"  align="center" width="150">
          <template slot-scope="{row}">
            <span>{{ row.evaluateLevel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价" prop="evaluateText"  align="center" width="150">
          <template slot-scope="{row}">
            <span>{{ row.evaluateText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价时间" prop="evaluateTime" align="center" width="150">
          <template slot-scope="{row}">
            <span>{{ row.evaluateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row, $index}">
           
            <el-button v-if="row.status != 'deleted'" size="mini" type="danger" @click="handleDelete(row, $index)">{{ $t('table.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  
      <!-- 修改的表单 -->
     
    </div>
  </template>
  
  <script>
  import { findPage, deleteProduct, deleteEvaluate } from '@/api/evaluate'
  import waves from '@/directive/waves' // waves directive
  import moment from 'moment'
  import { parseTime } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import { get } from 'sortablejs'
  
  export default {
    name: 'ComplexTable',
    components: { Pagination },
    directives: { waves },
    filters: {},
    data() {
      return {
        tableKey: 0,
        list: null, // 表格集合数据
        total: 0, // 总条数
        listLoading: true,
        listQuery: { // 查询的筛选条件
          page: 1,
          limit: 20,
          evaluateLevel: null, 
          userName: undefined,
          productName: undefined,
        },
        evaluateLevelOptions: [
        {value: null, label: '评价等级'},
        { value: '一星', label: '一星' },
        { value: '二星', label: '二星' },
        { value: '三星', label: '三星' },
        { value: '四星', label: '四星' },
        { value: '五星', label: '五星' }
      ],
        
        sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
        showReviewer: false,
       
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: 'Edit',
          create: 'Create'
        },
        dialogPvVisible: false,
        pvData: [],
    
        downloadLoading: false
      }
    },
    created() { // 未渲染之前 data加载之后
      this.getList()
    },
    methods: {
      async getList() {
        this.listLoading = true;
        findPage(this.listQuery).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          setTimeout(() => {
            this.listLoading = false;
          })
        })
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        });
        row.status = status;
      },
      sortChange(data) {
        const { prop, order } = data;
        if (prop === 'id') {
          this.sortByID(order);
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.listQuery.sort = '+id';
        } else {
          this.listQuery.sort = '-id';
        }
        this.handleFilter();
      },
    
      handleCreate() {
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate();
        });
      },
          formatDate() {
          // 确保 birthDate 是一个 Date 对象
          if (typeof this.temp.evaluateTime === 'string') {
          this.temp.evaluateTime = new Date(this.temp.evaluateTime); // 转换为 Date 对象
          }
  
          // 确保 birthDate 是有效的 Date 对象
          if (this.temp.evaluateTime instanceof Date && !isNaN(this.temp.evaluateTime)) {
          this.temp.evaluateTime = this.temp.evaluateTime.toISOString().split('T')[0]; // 转换为 yyyy-MM-dd 格式
          } else {
          console.error('Invalid date format'); // 处理无效日期的情况
          }
          },
    //   createData() {
    //     this.$refs['dataForm'].validate((valid) => {
    //       this.formatDate()
    //       console.log(this.temp)
    //       if (valid) {
    //         this.temp.launchTime=moment(String(this.temp.evaluateTime)).format('YYYY-MM-DD')
           
    //         addProduct(this.temp).then(response => {
    //           this.dialogFormVisible = false;
    //           this.$notify({
    //             title: '成功',
    //             message: '创建成功',
    //             type: 'success',
    //             duration: 2000
    //           });
    //           this.getList();
    //         });
    //       }
          
    //     });
    //   },
    //   handleUpdate(row) {
    //     this.temp = Object.assign({}, row); // copy obj
    //     this.dialogStatus = 'update';
    //     this.dialogFormVisible = true;
    //     this.$nextTick(() => {
    //       this.$refs['dataForm'].clearValidate();
    //     });
    //   },
    //   updateData() {
    //     this.$refs['dataForm'].validate((valid) => {
    //       this.formatDate()
    //       if (valid) {
    //         const tempData = Object.assign({}, this.temp);
    //         updateProduct(tempData).then(() => {
    //           this.dialogFormVisible = false;
    //           this.$notify({
    //             title: '成功',
    //             message: '更新成功',
    //             type: 'success',
    //             duration: 2000
    //           });
    //           this.getList();
    //         });
    //       }
    //     });
    //   },
      handleDelete(row, index) {
        deleteEvaluate(row.evaluateId).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getList();
        });
      },
      handleFetchPv(pv) {
        // Implement if needed
      },
    
      getSortClass(key) {
      const sort = this.listQuery.sort;
      if (sort === `+${key}`) {
        return 'ascending';
      } else if (sort === `-${key}`) {
        return 'descending';
      }
      return '';
    }
    }
  }
  </script>
  
  </script>
  
  <style scoped>
  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
  border-color: #409eff;
  }
  
  .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  }
  
  .avatar {
  width: 178px;
  height: 178px;
  display: block;
  }
  </style>